<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>文章管理 - 后台页面</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">后台页面</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    user
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">修改密码</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="/index.php/admin/login/logout">退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                    <li class="layui-nav-item"><a href="/index.php/admin/index/index">首页</a></li>
                    <li class="layui-nav-item"><a href="/index.php/admin/menu/index">菜单管理</a></li>
                    <li class="layui-nav-item layui-this"><a href="/index.php/admin/content/index">文章管理</a></li>
                    <li class="layui-nav-item"><a href="/index.php/admin/position/index">推荐位管理</a></li>
                </ul>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>
                <a href="/index.php/admin/index/index">首页</a> /
                <a href="/index.php/admin/content/index">文章管理</a> /
                <a><cite>查看文章</cite></a>
            </legend>
        </fieldset>
        <div class="layui-inline">
            <label class="layui-form-label">栏目</label>
            <div class="layui-input-inline" action="">
                <select name="searchbycatid" id="searchbycatid">
                    <option value="">请选择栏目</option>
                    {volist name="cat" id="vo"}<!--模板输出。cat是assign的变量名，vo是自定义的表示每一个item-->
                    <option value="{$vo.menu_id}">{$vo.menuname}</option>
                    {/volist}
                </select>
            </div>
            <div class="layui-input-inline">
                <input type="text" id="searchbytitle" name="searchbytitle" placeholder="请输入搜索标题" class="layui-input">
            </div>
            <button class="layui-btn" data-type="reload" id="searchbyType">搜索</button>
            <button type="button" class="layui-btn" id="addarticle">新增文章</button>
        </div>
        <table class="layui-hide" id="articlelist" lay-filter="showarticle"></table>
        <div class="layui-inline">
            <label class="layui-form-label">推荐位</label>
            <div class="layui-input-inline" action="">
                <select name="position" id="position">
                    <option value="">请选择推荐位</option>
                    {volist name="position" id="vo"}
                    <option value="{$vo.id}">{$vo.name}</option>
                    {/volist}
                </select>
            </div>
            <button type="button" class="layui-btn layui-btn-sm" id="addposition">新增推荐位</button>
        </div>
    </div>
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © 陆洋山芋
    </div>
</div>
<script src="/layui/layui.js"></script>
<script src="/dialog.js"></script>
<script src="/jutils.min.js"></script>
<!--id跟table cols里面的toolbar绑定-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
</script>
<script type="text/html" id="copyfrom">
    {{#  if(d.copyfrom == 0){ }}
    本站
    {{#  }else if(d.copyfrom == 1){ }}
    新浪网
    {{#  }else if(d.copyfrom == 2){ }}
    央视网
    {{#  }else if(d.copyfrom == 3){ }}
    网易
    {{# }else { }}
    搜狐
    {{# } }}
</script>
<script type="text/html" id="catid">
    {{#  if(d.catid == 3){ }}
    体育
    {{#  }else if(d.catid==4){ }}
    科技
    {{#  }else if(d.catid==5){ }}
    科技
    {{# }else { }}
    汽车
    {{# } }}
</script>
<script>
    layui.use('table',function () {
        var table = layui.table;
        //方法渲染。field对应后端传回的json数据的key，可以多传。自动ajax get方法
        table.render({
            elem:'#articlelist'
            ,url:'{:url("Content/showlist")}'//传递page和limit参数给后端
            ,cellMinWidth: 100 //全局定义常规单元格的最小宽度
            ,cols:[[
                {type:'checkbox'}//开启复选框
                ,{field:'news_id',width:80, title:'ID',align:'center'}
                ,{field:'catid',width:100, title:'栏目',align:'center',templet:'#catid'}
                ,{field:'title',width:150, title:'标题',align:'center'}
                ,{field:'thumb',width:100, title:'缩略图',align:'center',templet:function (d) {
                        return d.thumb?'有':'无';}}
                ,{field:'copyfrom',width:100, title:'来源',align:'center',templet:'#copyfrom'}
                ,{field:'create_time',width:200, title:'创建时间',align:'center',templet:function (d) {
                        return jutils.formatDate(new Date(d.create_time*1000),"YYYY-MM-DD HH:ii:ss");}} //使用函数库jutils
                ,{field:'update_time',width:200, title:'修改时间',align:'center',templet:function (d) {
                        return d.update_time?jutils.formatDate(new Date(d.update_time*1000),"YYYY-MM-DD HH:ii:ss"):'/';}}
                ,{field:'status',width:100, title:'状态',align:'center',templet: function(d){
                        return d.status == 1 ? '正常' : '异常';}}
                ,{field:'operation',width:150,title:'操作',align:'center',toolbar:'#barDemo'}//绑定按钮组
            ]]
            ,height:440
            ,page:true //开启分页
        });
        //表格根据搜索选项重载
        var $ = layui.$, active = {
            reload:function () {
                var searchbycatid = $('#searchbycatid');
                var searchbytitle = $('#searchbytitle');
                //执行重载
                table.reload('articlelist',{
                    page:{
                        curr : 1 //重新从第1页开始
                    }
                    ,where:{
                        catid :searchbycatid.val() //传递到后端
                        ,title:searchbytitle.val()
                    }
                });
            }
        };
        //点击搜索按钮查询
        $('#searchbyType').on('click',
            function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

        //新增文章按钮
        $('#addarticle').click(function () {
            window.location.href='{:url("Content/addIndex")}';
        });

        //监听工具条
        //tool是工具条事件名，showarticle是lay-filter对应的值
        table.on('tool(showarticle)',function (obj) {
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得lay-event的值
            if(layEvent == 'edit'){
                var url =' {:url("Content/editIndex")}?id='+ data.news_id;//传递id值去表里查询后给编辑页面赋初值,get方法
                location.href=url;
            } else if(layEvent == 'delete') {
                layer.confirm('确认要删除吗？', function(index){
                    obj.del();
                    layer.close(index);
                    $.ajax({
                        type:'post',
                        url:'{:url("Content/delete")}',
                        data:{
                            "news_id":data.news_id,
                        },
                        dataType: 'json',
                        beforeSend:function () {
                            loading = layer.load(1, {
                                shade: [0.1,'#fff'] //0.1透明度的白色背景
                            });
                        },
                        success:function (data) {
                            layer.close(loading);
                            if(data.status == 1) {
                                //成功
                                dialog.success(data.message,'{:url("Content/index")}');
                            } else {
                                dialog.error(data.message);
                            }
                            return false;
                        }
                    });
                });
            }
        });
        //监听复选框
        var row = [];
        table.on('checkbox(showarticle)', function(obj){
            //console.log(obj.data.news_id);
            row.push(obj.data.news_id);
        });
        //新增推荐位按钮监听
        //点击搜索按钮查询
        $('#addposition').on('click', function() {
            $.ajax({
                type:'post',
                url:'{:url("Position/add")}',
                data:{
                    row:row,
                    position_id: $('#position').val(),
                },
                dataType: 'json',
                success:function (d) {
                    if(d.status == 1) {
                        dialog.success(d.message,'{:url("Position/index")}');
                    } else {
                        dialog.error(d.message);
                    }
                }
            });
        });
    });
</script>
</body>
</html>